<!-- 错误边界组件 - 捕获子组件错误并显示友好的错误页面 -->
<template>
    <!-- 错误状态显示 -->
    <div v-if="hasError" class="error-boundary">
        <!-- 错误内容容器 -->
        <div class="error-container">
            <!-- 错误图标 -->
            <div class="error-icon">
                <el-icon>
                    <Warning />
                </el-icon>
            </div>

            <!-- 错误标题 -->
            <h2 class="error-title">页面加载出现问题</h2>

            <!-- 错误描述 -->
            <p class="error-description">
                抱歉，页面遇到了一些技术问题。请尝试刷新页面或稍后再试。
            </p>

            <!-- 错误详情（开发环境显示） -->
            <div v-if="isDevelopment" class="error-details">
                <details>
                    <summary>错误详情</summary>
                    <pre class="error-stack">{{ errorDetails }}</pre>
                </details>
            </div>

            <!-- 操作按钮区域 -->
            <div class="error-actions">
                <!-- 重新加载按钮 -->
                <el-button type="primary" @click="retry" class="retry-btn">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    重新加载
                </el-button>

                <!-- 返回首页按钮 -->
                <el-button @click="goHome" class="home-btn">
                    <el-icon>
                        <House />
                    </el-icon>
                    返回首页
                </el-button>
            </div>
        </div>
    </div>

    <!-- 正常状态显示子组件 -->
    <slot v-else />
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

/**
 * 导入Vue 3组合式API
 * @description 用于响应式数据管理和错误捕获
 */
import { ref, onErrorCaptured } from 'vue'

/**
 * 导入Vue Router
 * @description 用于页面导航
 */
import { useRouter } from 'vue-router'

/**
 * 导入Element Plus图标组件
 * @description 用于界面图标显示
 */
import { Warning, Refresh, House } from '@element-plus/icons-vue'

// ==================== 响应式数据 ====================

/**
 * 错误状态标识
 * @description 控制是否显示错误页面
 */
const hasError = ref(false)

/**
 * 错误对象
 * @description 存储捕获到的错误信息
 */
const error = ref<Error | null>(null)

/**
 * 错误详情信息
 * @description 包含错误堆栈和组件信息
 */
const errorDetails = ref<string>('')

/**
 * 开发环境标识
 * @description 用于控制是否显示详细错误信息
 */
const isDevelopment = import.meta.env.DEV

// ==================== 获取实例 ====================

/**
 * 获取路由实例
 * @description 用于页面导航操作
 */
const router = useRouter()

// ==================== 错误处理逻辑 ====================

/**
 * 错误捕获处理函数
 * @description 捕获子组件树中的JavaScript错误
 * @param err 错误对象
 * @param instance 发生错误的组件实例
 * @param info 错误信息
 * @returns false 阻止错误继续传播
 */
onErrorCaptured((err: Error, instance: any, info: string) => {
    // 设置错误状态
    hasError.value = true
    error.value = err

    // 构建错误详情信息
    errorDetails.value = `
错误信息: ${err.message}
错误堆栈: ${err.stack}
组件信息: ${info}
时间: ${new Date().toLocaleString()}
  `.trim()

    // 记录错误信息到控制台
    console.error('错误边界捕获到错误:', {
        error: err,
        component: instance,
        info: info,
        timestamp: new Date().toISOString()
    })

    // 可以发送错误到监控服务
    // sendErrorToMonitoring(err, info)

    // 阻止错误继续传播
    return false
})

// ==================== 交互方法 ====================

/**
 * 重新加载页面
 * @description 刷新当前页面以尝试恢复
 */
const retry = () => {
    // 重置错误状态
    hasError.value = false
    error.value = null
    errorDetails.value = ''

    // 重新加载页面
    window.location.reload()
}

/**
 * 返回首页
 * @description 导航到网站首页
 */
const goHome = () => {
    // 重置错误状态
    hasError.value = false
    error.value = null
    errorDetails.value = ''

    // 导航到首页
    router.push('/')
}
</script>

<style scoped lang="scss">
// 导入错误边界样式
@use '../assets/styles/components/_error-boundary';
</style>
